<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>校园租赁-用户登录</title>
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
        <!-- 复用首页头部 -->
        <header th:replace="index::header"></header>

        <!-- 填写登录信息 -->
        <div class="container" style="margin-top: -20px;">
            <!-- 头部登录标题 -->
                <div class="main" style="margin: 0 auto; width: 85%;">
                    <div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">

                        <h3 class="text-center text-info pb-3">登录</h3>

                        <!-- 内容 -->
                        <div class="modal-content" id="login-up">
                            <div class="modal-body">
                                <!-- 提交表单 -->
                                <form id="loginForm" method="post" th:action="#{/login}">
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                            <div class="form-group">
                                                <label>账号<span style="color: red" th:text="${loginUserMsg}"></span></label>
                                                <div class="input-with-icon">
                                                    <input type="text" name="userName" class="form-control" placeholder="请输入您的账号">
                                                    <i class="ti-info"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                            <div class="form-group">
                                                <label>密码<span style="color:red;" th:text="${loginPassMsg}"></span></label>
                                                <div class="input-with-icon">
                                                    <input type="password" name="userPass" class="form-control" placeholder="请输入您的密码">
                                                    <i class="ti-unlock"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                            <div class="form-group">
                                                <label>角色</label>
                                                <div class="simple">
                                                    <select name="role" class="form-control">
                                                        <option value="customer">学生租客</option>
                                                        <option value="owner">房东</option>
                                                        <option value="manager">管理员</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                            <div class="form-group">
                                                <label>验证码<span style="color: red" th:text="${codeMsg}"></span></label>
                                                <div class="row">
                                                    <div class="input-with-icon col-sm-7">
                                                        <input type="text" name="codeMsg" class="form-control" placeholder="请输入验证码">
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <img th:src="@{/kaptcha}" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/>
                                                        <div>
                                                            <a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">&nbsp;&nbsp;刷新验证码</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                            <div class="form-group">
                                                <div class="col-sm-2"></div>
                                                <div class="col-sm-10">
                                                    <!--多选框checked赋值为true或false也能得到结果，可以识别-->
                                                    <input type="checkbox" id="remember-me" name="rememberme"
                                                           th:checked="${param.rememberme}">
                                                    <label class="form-check-label" for="remember-me">记住我</label>
                                                    <a th:href="@{/forgotPage}" class="text-danger float-right">忘记密码?</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                            <div class="form-group">
                                                <button type="submit" class="text-white full-width btn btn-md pop-login bg-2">立即登录</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
        </div>

    <!-- 复用首页底部 -->
    <div th:replace="index::footer"></div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script th:src="@{/assets/js/common/global.js}"></script>
    <script>
        function refresh_kaptcha() {
            var path="/xhu_rent/kaptcha?p="+Math.random();
            $("#kaptcha").attr("src",path);
        }
    </script>
</body>
</html>